<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表情包生成器 - 你可真是个人才</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B6B',
                        secondary: '#4ECDC4',
                        accent: '#FFE66D',
                        dark: '#2A2D34',
                        light: '#F7FFF7'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'bounce-slow': 'bounce 2s infinite',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .text-shadow-white {
                text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
            }
            .meme-template {
                transition: all 0.3s ease;
            }
            .meme-template:hover {
                transform: scale(1.05);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .meme-template.active {
                border: 4px solid theme('colors.primary');
            }
            .btn-primary {
                @apply bg-primary text-white font-bold py-2 px-4 rounded-lg hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105;
            }
            .btn-secondary {
                @apply bg-secondary text-white font-bold py-2 px-4 rounded-lg hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105;
            }
            .btn-accent {
                @apply bg-accent text-dark font-bold py-2 px-4 rounded-lg hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105;
            }
            .input-field {
                @apply border-2 border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50;
            }
            .draggable-text {
                cursor: move;
                user-select: none;
            }
            .text-handle {
                @apply absolute w-4 h-4 bg-primary rounded-full opacity-70 cursor-move;
                transform: translate(-50%, -50%);
            }
            .text-handle:hover {
                @apply opacity-100;
            }
        }
    </style>
</head>
<body class="bg-light min-h-screen font-sans text-dark">
    <!-- 顶部导航栏 -->
    <header class="bg-dark text-light shadow-lg">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-smile-o text-primary text-3xl"></i>
                <h1 class="text-2xl font-bold">表情包生成器</h1>
            </div>
            <div class="hidden md:flex space-x-4">
                <button id="randomBtn" class="btn-accent">
                    <i class="fa fa-random mr-2"></i>随机生成
                </button>
                <button id="downloadBtn" class="btn-primary">
                    <i class="fa fa-download mr-2"></i>下载表情包
                </button>
            </div>
            <button id="mobileMenuBtn" class="md:hidden text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="md:hidden hidden bg-dark border-t border-gray-700">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
                <button id="randomBtnMobile" class="btn-accent w-full">
                    <i class="fa fa-random mr-2"></i>随机生成
                </button>
                <button id="downloadBtnMobile" class="btn-primary w-full">
                    <i class="fa fa-download mr-2"></i>下载表情包
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 欢迎区域 -->
        <section class="mb-8 text-center">
            <h2 class="text-3xl font-bold mb-2">你可真是个人才</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                选择一个模板，添加你的文字，生成专属表情包！让你的聊天更有趣，表达更生动。
            </p>
        </section>

        <!-- 主要工作区 -->
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 左侧模板选择区 -->
            <section class="lg:w-1/3 bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fa fa-th-large text-primary mr-2"></i>
                    选择模板
                </h3>
                <div class="grid grid-cols-2 gap-4" id="templateContainer">
                    <!-- 模板将通过JS动态加载 -->
                </div>
            </section>

            <!-- 右侧编辑区 -->
            <section class="lg:w-2/3 bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fa fa-edit text-primary mr-2"></i>
                    编辑表情包
                </h3>
                
                <!-- 编辑器工具栏 -->
                <div class="mb-6 bg-gray-100 p-4 rounded-lg">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="textInput" class="block text-sm font-medium text-gray-700 mb-1">
                                输入文字
                            </label>
                            <div class="flex">
                                <input type="text" id="textInput" class="input-field flex-grow" 
                                    placeholder="输入表情包文字..." value="你可真是个人才">
                                <button id="applyTextBtn" class="btn-primary ml-2">
                                    <i class="fa fa-check"></i>
                                </button>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                文字样式
                            </label>
                            <div class="grid grid-cols-3 gap-2">
                                <div>
                                    <label for="textColor" class="block text-xs text-gray-500">颜色</label>
                                    <input type="color" id="textColor" class="w-full h-8 cursor-pointer" value="#000000">
                                </div>
                                <div>
                                    <label for="textSize" class="block text-xs text-gray-500">大小</label>
                                    <input type="range" id="textSize" class="w-full" min="12" max="48" value="24">
                                </div>
                                <div>
                                    <label for="textFont" class="block text-xs text-gray-500">字体</label>
                                    <select id="textFont" class="input-field w-full text-sm">
                                        <option value="Arial, sans-serif">Arial</option>
                                        <option value="Comic Sans MS, cursive">Comic Sans</option>
                                        <option value="Impact, sans-serif">Impact</option>
                                        <option value="Microsoft YaHei, sans-serif">微软雅黑</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 预览区域 -->
                <div class="flex justify-center">
                    <div class="relative border-2 border-gray-200 rounded-lg p-2 bg-gray-50 inline-block">
                        <canvas id="memeCanvas" class="max-w-full h-auto cursor-move" width="512" height="512"></canvas>
                        <div id="textHandle" class="text-handle hidden"></div>
                        <div id="loadingOverlay" class="absolute inset-0 bg-white bg-opacity-80 flex items-center justify-center hidden">
                            <div class="text-primary">
                                <i class="fa fa-spinner fa-spin fa-3x"></i>
                                <p class="mt-2 font-medium">加载中...</p>
                            </div>
                        </div>
                        <div id="dragHint" class="absolute top-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded-full hidden">
                            <i class="fa fa-arrows mr-1"></i>拖动文字
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="mt-6 flex flex-wrap justify-center gap-4">
                    <button id="resetBtn" class="btn-secondary">
                        <i class="fa fa-refresh mr-2"></i>重置
                    </button>
                    <button id="randomTextBtn" class="btn-accent">
                        <i class="fa fa-magic mr-2"></i>随机文字
                    </button>
                    <button id="downloadBtnBottom" class="btn-primary">
                        <i class="fa fa-download mr-2"></i>下载表情包
                    </button>
                </div>
            </section>
        </div>
        
        <!-- 热门文字推荐 -->
        <section class="mt-12 bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-xl font-bold mb-4 flex items-center">
                <i class="fa fa-fire text-primary mr-2"></i>
                热门文字推荐
            </h3>
            <div class="flex flex-wrap gap-2" id="popularTexts">
                <button class="popular-text-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm transition-colors">你可真是个人才</button>
                <button class="popular-text-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm transition-colors">这操作我给满分</button>
                <button class="popular-text-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm transition-colors">我太南了</button>
                <button class="popular-text-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm transition-colors">奥利给</button>
                <button class="popular-text-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm transition-colors">真香警告</button>
                <button class="popular-text-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm transition-colors">我裂开了</button>
                <button class="popular-text-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm transition-colors">爷青回</button>
                <button class="popular-text-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm transition-colors">干饭人干饭魂</button>
                <button class="popular-text-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm transition-colors">耗子尾汁</button>
                <button class="popular-text-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm transition-colors">yyds</button>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-light mt-12 py-6">
        <div class="container mx-auto px-4 text-center">
            <p>© 2025 表情包生成器 - 让聊天更有趣</p>
            <div class="flex justify-center space-x-4 mt-4">
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-github text-2xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-twitter text-2xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-weixin text-2xl"></i>
                </a>
            </div>
        </div>
    </footer>

    <!-- 通知组件 -->
    <div id="notification" class="fixed bottom-4 right-4 bg-white rounded-lg shadow-lg p-4 max-w-sm transform translate-y-full opacity-0 transition-all duration-300 flex items-start">
        <div id="notificationIcon" class="text-primary mr-3 text-xl mt-1">
            <i class="fa fa-check-circle"></i>
        </div>
        <div>
            <h4 id="notificationTitle" class="font-bold text-lg">成功</h4>
            <p id="notificationMessage" class="text-gray-600">操作成功完成</p>
        </div>
        <button id="closeNotification" class="ml-auto text-gray-400 hover:text-gray-600">
            <i class="fa fa-times"></i>
        </button>
    </div>

    <script>
        // 表情包模板数据
        const memeTemplates = [
            {
                id: 1,
                name: "熊猫头",
                url: "https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/46278c9769324384a80e9292fe4d5cd1~tplv-a9rns2rl98-image.image?rcl=20251104172343266306B102022EF93D41&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840234&x-signature=sH%2BlpQL6A%2B9pQLxpK2%2FMuIQ%2BcUQ%3D",
                textPosition: { x: 0.5, y: 0.85 },
                textColor: "#000000",
                textSize: 24
            },
            {
                id: 2,
                name: "猫咪",
                url: "https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/9a6760dc83634651b8cc7052b6db600a~tplv-a9rns2rl98-image.image?rcl=20251104172343266306B102022EF93D41&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840234&x-signature=g1PhxQWVcX14BXqybSAc7uYLB0M%3D",
                textPosition: { x: 0.5, y: 0.25 },
                textColor: "#000000",
                textSize: 24
            },
            {
                id: 3,
                name: "狗狗",
                url: "https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/05bb4ee43407408a9f6a65c3d12bebb0~tplv-a9rns2rl98-image.image?rcl=20251104172343266306B102022EF93D41&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840234&x-signature=LYSJ%2Fcv8Ahz0se7FW3%2FLHhFbG00%3D",
                textPosition: { x: 0.5, y: 0.25 },
                textColor: "#000000",
                textSize: 24
            },
            {
                id: 4,
                name: "愤怒的人",
                url: "https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/2d6a0e2ea97d47cba993d20f9eabf4bc~tplv-a9rns2rl98-image.image?rcl=20251104172343266306B102022EF93D41&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840234&x-signature=aqdO0gkDV1EY%2FoqVvNHm2K2O70Q%3D",
                textPosition: { x: 0.5, y: 0.25 },
                textColor: "#FFFFFF",
                textSize: 24
            }
        ];

        // 随机文字库
        const randomTexts = [
            "你可真是个人才",
            "这操作我给满分",
            "我太南了",
            "奥利给",
            "真香警告",
            "我裂开了",
            "爷青回",
            "干饭人干饭魂",
            "耗子尾汁",
            "yyds",
            "绝绝子",
            "拿来吧你",
            "躺平",
            "内卷",
            "破防了",
            "EMO",
            "芭比Q了",
            "退退退",
            "服了你个老六",
            "冤种"
        ];

        // DOM元素
        const templateContainer = document.getElementById('templateContainer');
        const memeCanvas = document.getElementById('memeCanvas');
        const ctx = memeCanvas.getContext('2d');
        const textInput = document.getElementById('textInput');
        const applyTextBtn = document.getElementById('applyTextBtn');
        const textColor = document.getElementById('textColor');
        const textSize = document.getElementById('textSize');
        const textFont = document.getElementById('textFont');
        const resetBtn = document.getElementById('resetBtn');
        const randomBtn = document.getElementById('randomBtn');
        const randomBtnMobile = document.getElementById('randomBtnMobile');
        const randomTextBtn = document.getElementById('randomTextBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const downloadBtnMobile = document.getElementById('downloadBtnMobile');
        const downloadBtnBottom = document.getElementById('downloadBtnBottom');
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        const notification = document.getElementById('notification');
        const notificationTitle = document.getElementById('notificationTitle');
        const notificationMessage = document.getElementById('notificationMessage');
        const notificationIcon = document.getElementById('notificationIcon');
        const closeNotification = document.getElementById('closeNotification');
        const loadingOverlay = document.getElementById('loadingOverlay');
        const popularTextBtns = document.querySelectorAll('.popular-text-btn');
        const textHandle = document.getElementById('textHandle');
        const dragHint = document.getElementById('dragHint');

        // 当前选中的模板和文字
        let currentTemplate = memeTemplates[0];
        let currentText = "你可真是个人才";
        let currentImage = null;
        
        // 拖动相关变量
        let isDragging = false;
        let textPosition = { x: currentTemplate.textPosition.x, y: currentTemplate.textPosition.y };
        let offsetX, offsetY;
        let canvasRect;

        // 初始化
        function init() {
            // 加载模板
            loadTemplates();
            
            // 加载默认模板
            loadTemplate(currentTemplate);
            
            // 绑定事件
            bindEvents();
            
            // 绑定拖拽事件
            bindDragEvents();
        }

        // 加载模板
        function loadTemplates() {
            templateContainer.innerHTML = '';
            
            memeTemplates.forEach(template => {
                const templateElement = document.createElement('div');
                templateElement.className = `meme-template rounded-lg overflow-hidden cursor-pointer ${template.id === currentTemplate.id ? 'active' : ''}`;
                templateElement.dataset.id = template.id;
                templateElement.innerHTML = `
                    <img src="${template.url}" alt="${template.name}" class="w-full h-32 object-cover">
                    <div class="bg-gray-100 p-2 text-center text-sm font-medium">
                        ${template.name}
                    </div>
                `;
                
                templateElement.addEventListener('click', () => {
                    // 更新选中状态
                    document.querySelectorAll('.meme-template').forEach(el => el.classList.remove('active'));
                    templateElement.classList.add('active');
                    
                    // 加载选中的模板
                    loadTemplate(template);
                });
                
                templateContainer.appendChild(templateElement);
            });
        }

        // 加载选中的模板
        function loadTemplate(template) {
            showLoading();
            
            currentTemplate = template;
            
            // 更新UI
            textColor.value = template.textColor;
            textSize.value = template.textSize;
            
            // 更新文字位置
            textPosition = { ...template.textPosition };
            
            // 加载图片
            const img = new Image();
            img.crossOrigin = 'Anonymous';
            img.onload = function() {
                currentImage = img;
                drawMeme();
                updateTextHandlePosition();
                hideLoading();
            };
            img.onerror = function() {
                showNotification('错误', '加载模板失败，请重试', 'error');
                hideLoading();
            };
            img.src = template.url;
        }

        // 绘制表情包
        function drawMeme() {
            if (!currentImage) return;
            
            // 清除画布
            ctx.clearRect(0, 0, memeCanvas.width, memeCanvas.height);
            
            // 绘制图片
            ctx.drawImage(currentImage, 0, 0, memeCanvas.width, memeCanvas.height);
            
            // 绘制文字
            const text = currentText;
            const fontSize = parseInt(textSize.value);
            const font = `${fontSize}px ${textFont.value}`;
            
            ctx.font = font;
            ctx.fillStyle = textColor.value;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // 计算文字位置
            const x = memeCanvas.width * textPosition.x;
            const y = memeCanvas.height * textPosition.y;
            
            // 添加文字阴影
            ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
            ctx.shadowBlur = 2;
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;
            
            // 绘制文字
            ctx.fillText(text, x, y);
            
            // 重置阴影
            ctx.shadowColor = 'transparent';
        }

        // 更新文字手柄位置
        function updateTextHandlePosition() {
            if (!currentImage) return;
            
            const x = memeCanvas.width * textPosition.x;
            const y = memeCanvas.height * textPosition.y;
            
            // 获取canvas在页面中的位置
            canvasRect = memeCanvas.getBoundingClientRect();
            
            // 更新手柄位置
            textHandle.style.left = `${x + canvasRect.left}px`;
            textHandle.style.top = `${y + canvasRect.top}px`;
            
            // 显示手柄和提示
            textHandle.classList.remove('hidden');
            dragHint.classList.remove('hidden');
        }

        // 绑定拖拽事件
        function bindDragEvents() {
            // 鼠标按下事件
            memeCanvas.addEventListener('mousedown', startDrag);
            
            // 鼠标移动事件
            document.addEventListener('mousemove', drag);
            
            // 鼠标释放事件
            document.addEventListener('mouseup', endDrag);
            
            // 触摸事件支持
            memeCanvas.addEventListener('touchstart', handleTouchStart, { passive: false });
            document.addEventListener('touchmove', handleTouchMove, { passive: false });
            document.addEventListener('touchend', handleTouchEnd);
        }

        // 开始拖拽
        function startDrag(e) {
            e.preventDefault();
            
            // 获取canvas在页面中的位置
            canvasRect = memeCanvas.getBoundingClientRect();
            
            // 计算点击位置相对于canvas的坐标
            const clickX = e.clientX - canvasRect.left;
            const clickY = e.clientY - canvasRect.top;
            
            // 计算文字位置
            const textX = memeCanvas.width * textPosition.x;
            const textY = memeCanvas.height * textPosition.y;
            
            // 计算文字宽度
            const fontSize = parseInt(textSize.value);
            ctx.font = `${fontSize}px ${textFont.value}`;
            const textWidth = ctx.measureText(currentText).width;
            
            // 判断点击是否在文字附近
            const textPadding = 20; // 点击区域的额外padding
            if (
                clickX >= textX - textWidth/2 - textPadding &&
                clickX <= textX + textWidth/2 + textPadding &&
                clickY >= textY - fontSize/2 - textPadding &&
                clickY <= textY + fontSize/2 + textPadding
            ) {
                isDragging = true;
                
                // 计算偏移量
                offsetX = clickX - textX;
                offsetY = clickY - textY;
                
                // 改变鼠标样式
                memeCanvas.style.cursor = 'grabbing';
            }
        }

        // 拖拽中
        function drag(e) {
            if (!isDragging || !currentImage) return;
            e.preventDefault();
            
            // 计算新的文字位置
            const newX = (e.clientX - canvasRect.left - offsetX) / memeCanvas.width;
            const newY = (e.clientY - canvasRect.top - offsetY) / memeCanvas.height;
            
            // 限制在canvas范围内
            textPosition.x = Math.max(0, Math.min(1, newX));
            textPosition.y = Math.max(0, Math.min(1, newY));
            
            // 重新绘制
            drawMeme();
            
            // 更新手柄位置
            updateTextHandlePosition();
        }

        // 结束拖拽
        function endDrag() {
            if (isDragging) {
                isDragging = false;
                memeCanvas.style.cursor = 'move';
                
                // 显示通知
                showNotification('成功', '文字位置已更新', 'success');
            }
        }

        // 处理触摸开始
        function handleTouchStart(e) {
            if (e.touches.length === 1) {
                const touch = e.touches[0];
                const mouseEvent = new MouseEvent('mousedown', {
                    clientX: touch.clientX,
                    clientY: touch.clientY,
                    preventDefault: () => e.preventDefault()
                });
                startDrag(mouseEvent);
            }
        }

        // 处理触摸移动
        function handleTouchMove(e) {
            if (e.touches.length === 1) {
                const touch = e.touches[0];
                const mouseEvent = new MouseEvent('mousemove', {
                    clientX: touch.clientX,
                    clientY: touch.clientY,
                    preventDefault: () => e.preventDefault()
                });
                drag(mouseEvent);
            }
        }

        // 处理触摸结束
        function handleTouchEnd() {
            endDrag();
        }

        // 绑定事件
        function bindEvents() {
            // 应用文字按钮
            applyTextBtn.addEventListener('click', () => {
                currentText = textInput.value.trim() || '你可真是个人才';
                drawMeme();
                updateTextHandlePosition();
                showNotification('成功', '文字已应用', 'success');
            });
            
            // 回车键应用文字
            textInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    applyTextBtn.click();
                }
            });
            
            // 文字颜色变化
            textColor.addEventListener('input', () => {
                drawMeme();
            });
            
            // 文字大小变化
            textSize.addEventListener('input', () => {
                drawMeme();
                updateTextHandlePosition();
            });
            
            // 字体变化
            textFont.addEventListener('change', () => {
                drawMeme();
                updateTextHandlePosition();
            });
            
            // 重置按钮
            resetBtn.addEventListener('click', () => {
                textInput.value = '你可真是个人才';
                currentText = '你可真是个人才';
                textColor.value = currentTemplate.textColor;
                textSize.value = currentTemplate.textSize;
                textFont.value = 'Arial, sans-serif';
                
                // 重置文字位置
                textPosition = { ...currentTemplate.textPosition };
                
                drawMeme();
                updateTextHandlePosition();
                showNotification('成功', '已重置', 'success');
            });
            
            // 随机生成按钮
            [randomBtn, randomBtnMobile].forEach(btn => {
                btn.addEventListener('click', () => {
                    // 随机选择模板
                    const randomTemplate = memeTemplates[Math.floor(Math.random() * memeTemplates.length)];
                    
                    // 随机选择文字
                    const randomText = randomTexts[Math.floor(Math.random() * randomTexts.length)];
                    
                    // 更新UI
                    textInput.value = randomText;
                    currentText = randomText;
                    
                    // 加载模板
                    loadTemplate(randomTemplate);
                    
                    // 更新选中状态
                    document.querySelectorAll('.meme-template').forEach(el => {
                        el.classList.remove('active');
                        if (parseInt(el.dataset.id) === randomTemplate.id) {
                            el.classList.add('active');
                        }
                    });
                });
            });
            
            // 随机文字按钮
            randomTextBtn.addEventListener('click', () => {
                const randomText = randomTexts[Math.floor(Math.random() * randomTexts.length)];
                textInput.value = randomText;
                currentText = randomText;
                drawMeme();
                updateTextHandlePosition();
                showNotification('成功', '已生成随机文字', 'success');
            });
            
            // 下载按钮
            [downloadBtn, downloadBtnMobile, downloadBtnBottom].forEach(btn => {
                btn.addEventListener('click', () => {
                    downloadMeme();
                });
            });
            
            // 移动端菜单
            mobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
            
            // 关闭通知
            closeNotification.addEventListener('click', () => {
                hideNotification();
            });
            
            // 热门文字点击
            popularTextBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const text = btn.textContent;
                    textInput.value = text;
                    currentText = text;
                    drawMeme();
                    updateTextHandlePosition();
                });
            });
            
            // 窗口大小改变时更新手柄位置
            window.addEventListener('resize', () => {
                if (currentImage) {
                    updateTextHandlePosition();
                }
            });
        }

        // 下载表情包
        function downloadMeme() {
            try {
                // 创建下载链接
                const link = document.createElement('a');
                link.download = `表情包_${currentText.replace(/\s+/g, '_')}.png`;
                link.href = memeCanvas.toDataURL('image/png');
                link.click();
                
                showNotification('成功', '表情包已下载', 'success');
            } catch (error) {
                showNotification('错误', '下载失败，请重试', 'error');
                console.error('下载失败:', error);
            }
        }

        // 显示通知
        function showNotification(title, message, type = 'success') {
            notificationTitle.textContent = title;
            notificationMessage.textContent = message;
            
            // 设置图标
            if (type === 'success') {
                notificationIcon.innerHTML = '<i class="fa fa-check-circle"></i>';
                notificationIcon.className = 'text-green-500 mr-3 text-xl mt-1';
            } else if (type === 'error') {
                notificationIcon.innerHTML = '<i class="fa fa-exclamation-circle"></i>';
                notificationIcon.className = 'text-red-500 mr-3 text-xl mt-1';
            } else if (type === 'warning') {
                notificationIcon.innerHTML = '<i class="fa fa-exclamation-triangle"></i>';
                notificationIcon.className = 'text-yellow-500 mr-3 text-xl mt-1';
            } else if (type === 'info') {
                notificationIcon.innerHTML = '<i class="fa fa-info-circle"></i>';
                notificationIcon.className = 'text-blue-500 mr-3 text-xl mt-1';
            }
            
            // 显示通知
            notification.classList.remove('translate-y-full', 'opacity-0');
            
            // 自动隐藏
            setTimeout(hideNotification, 3000);
        }

        // 隐藏通知
        function hideNotification() {
            notification.classList.add('translate-y-full', 'opacity-0');
        }

        // 显示加载中
        function showLoading() {
            loadingOverlay.classList.remove('hidden');
        }

        // 隐藏加载中
        function hideLoading() {
            loadingOverlay.classList.add('hidden');
        }

        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
